/**
* 图表界面
*/ 
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>决策分析系统</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
       <h1>慈善系统决策分析大屏</h1>
        </div>
      </el-col>
      <!-- <el-col :span="6">
        <div class="stbgc">
          <el-row>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="day">日</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="month">月</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="years">年</el-radio>
            </el-col>
          </el-row>
        </div> -->
      <!-- </el-col> -->
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SUMEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="ClickEchart"></div>
        </div>
      </el-col>
    </el-row>

    
    <!-- 统计图 -->
   
  
  <!-- tets -->
  <div>
      <el-row :gutter="23">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payEchart"></div>
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payNumEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
 <div>
      <el-row :gutter="24">
        <el-col :span="8" class="text-c">

          <div class="paybox">
            <div class="cavasbox" ref="payoption1"></div>
          </div>

        </el-col>
        <el-col :span="8" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="shuju"></div>
          </div>
        </el-col>
          <el-col :span="8" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payNumEchart2"></div>
          </div>
        </el-col>
        
      </el-row>
    </div>

    <!-- ww -->

    
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      //  销售总笔数 
      SCEoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '捐助总数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            // color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '捐助总数',
          type: 'bar',
          barGap: 0,
          data: [100, 105, 102, 80, 200, 130, 120, 95, 110, 103, 97, 86],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            emphasis: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          }
        }]
      },
      //  销售总金额 
      SUMoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '受助项目总数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              // color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              // color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              // color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              // color: "#999999"
            }
          }
        },
        series: [{
          name: '受助项目总数',
          //   type: 'bar',
          type: 'line',
          barGap: 0,
          data: [100, 180, 106, 200, 186, 157, 120, 159, 137, 154, 157, 189],
          barWidth: 10,
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },
      //  总点击量
      Clickoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '总点击量',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '总点击量',
          type: 'bar',
          barGap: 0,
          data: [1000, 1025, 1052, 1268, 1259, 1520, 1369, 1597, 1576, 1289, 1986, 2000],
          barWidth: 10,
          itemStyle: {
                       color: "#108ff9"

          }
        }]
      },
      //  支付方式统计
      payoption1: {
   title: {
      subtext:'用户数据',
      subtextStyle:{
        color:"#000000",
      },
    text: '',
  top:10,
     textStyle:{
       
  fontSize:12,
     },
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top:50,
  },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 464, name: '游客' },
        { value: 20, name: '管理员' },
        { value: 75, name: '受助者' },
        { value: 235, name: '捐助者' },
      
      ],
      color:["rgba(79, 134, 180,1)", "rgba(95, 189, 255,1)", "rgba(80, 162, 231,1)","rgba(87, 176, 253,1)"],
    }
  ]
      },


      shuju: {
 title : {
        // text: '关系',
       
    },
    series : [
        {
            name:'树图',
            type:'tree',
            orient: 'horizontal',  // vertical horizontal
            rootLocation: {x: 100, y: '60%'}, // 根节点位置  {x: 'center',y: 10}
            nodePadding: 20,
            symbol: 'circle',
            symbolSize: 40,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'inside',
                        textStyle: {
                            // color: '#cc9999',
                            fontSize: 12,
                            fontWeight:  'bolder'
                        }
                    },
                    lineStyle: {
                        // color: '#000',
                        width: 1,
                        type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            data: [
                {
                    name: '"慈善-区块链"结构',
                    value: 6,
                     
                 
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            }
                        }
                    },
                    children: [
                        {
                            name: '观察',
                            value: 4,
                         
                            itemStyle: {
                              fontSize:20,
                                normal: {
                                    label: {
                                        show: false
                                    }
                                }
                            },
                          
                            children: [
                                {
                                    name: 'node6节点',
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    value: 4,
                                    itemStyle: {
                                        normal: {
                                            // color: '#fa6900',
                                            label: {
                                                show: true,
                                                position: 'right'
                                            },
                                            
                                        },
                                        emphasis: {
                                            label: {
                                                show: false
                                            },
                                            borderWidth: 0
                                        }
                                    }
                                },
                         
                          
                            ]
                        },
                         {
                            name: 'donors捐赠者组织',
                            value: 4,
                         
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                }
                            },
                          
                            children: [
                                {
                                    name: 'node0节点',
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    value: 4,
                                    itemStyle: {
                                        normal: {
                                            // color: '#fa6900',
                                            label: {
                                                show: true,
                                                position: 'right'
                                            },
                                            
                                        },
                                        emphasis: {
                                            label: {
                                                show: false
                                            },
                                            borderWidth: 0
                                        }
                                    }
                                },
                                {
                                    name: ' node1节点',
                                    value: 4,
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'right',
                                                formatter: "{b}"
                                            },
                                            // color: '#fa6900',
                                            borderWidth: 2,
                                            // borderColor: '#cc66ff'
 
                                        },
                                        emphasis: {
                                            borderWidth: 0
                                        }
                                    }
                                },
                          
                            ]
                        },
                          {
                            name: 'auditor审核者组织',
                            value: 4,
                         
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                }
                            },
                          
                            children: [
                                {
                                    name: 'node2节点',
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    value: 4,
                                    itemStyle: {
                                        normal: {
                                            color: '#fa6900',
                                            label: {
                                                show: true,
                                                position: 'right'
                                            },
                                            
                                        },
                                        emphasis: {
                                            label: {
                                                show: false
                                            },
                                            borderWidth: 0
                                        }
                                    }
                                },
                                {
                                    name: ' node3节点',
                                    value: 4,
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'right',
                                                formatter: "{b}"
                                            },
                                            color: '#fa6900',
                                            borderWidth: 2,
                                            borderColor: '#cc66ff'
 
                                        },
                                        emphasis: {
                                            borderWidth: 0
                                        }
                                    }
                                },
                          
                            ]
                        },
                           {
                            name: 'recipients求助者组织',
                            value: 4,
                         
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                }
                            },
                          
                            children: [
                                {
                                    name: 'node4节点',
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    value: 4,
                                    itemStyle: {
                                        normal: {
                                            color: '#fa6900',
                                            label: {
                                                show: true,
                                                position: 'right'
                                            },
                                            
                                        },
                                        emphasis: {
                                            label: {
                                                show: false
                                            },
                                            borderWidth: 0
                                        }
                                    }
                                },
                                {
                                    name: ' node5节点',
                                    value: 4,
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'right',
                                                formatter: "{b}"
                                            },
                                            // color: '#fa6900',
                                            borderWidth: 2,
                                            // borderColor: '#cc66ff'
 
                                        },
                                        emphasis: {
                                            borderWidth: 0
                                        }
                                    }
                                },
                          
                            ]
                        },
                    ]
                }
            ]
        }
    ]

      },
      payNumEchart2:{
     title: {
    // text: 'Stacked Area Chart'
  },
     title: {
      subtext:'区块链数据',
      subtextStyle:{
        color:"#000000",
      },
    text: '',
  top:10,
     textStyle:{
       
  fontSize:12,
     },
    left: 'center'
  },
  tooltip: {
    // trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: 'rgba(16, 143, 249,0.7)'
      }
    }
  },
  legend:{
     left:"3%",
     orient:"vertical"
  },
 
  grid: {
    left: '1%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: [
    
    {
      type: 'category',
      boundaryGap: false,
    axisLabel:{
      interval:0
    },
      data: ['0', '块高数', '节点数', '已交易', '待交易']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      // name: '块高数量',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [0, 132, 7, 134, 90,],
         itemStyle: {
            color: "#108ff9"
          }
    },
  ]
      },

  // new
   //  支付方式统计
      payoption: {
        // backgroundColor: '#2c343c',
        title: {
          text: '受助类型统计(金额)',
          left: 4,
          top: 5,
          textStyle: {
            fontSize: 12,
            // color: '#ccc'
          }
        },
  legend: {
    orient: 'vertical',
    left: 'left',
    top:30,
  },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '受助类型统计(金额)',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 106, name: '孤寡老人' },
              { value: 160, name: '贫困学生' },
              { value: 85, name: '烈士子女' },
              { value: 235, name: '其他' },
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  // color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            },
       
           
            itemStyle: {
              normal: {
                      color: "rgba(16, 143, 249,0.7)",
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },
      payNumoption: {
        // backgroundColor: '#2c343c',
        title: {
          text: '捐助类型统计(笔数)',
          left: 4,
          top: 5,
          textStyle: {
            fontSize: 12,
            // color: '#ccc'
          }
        },
 legend: {
    orient: 'vertical',
    left: 'left',
    top:30,
  },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '捐助类型统计(笔数)',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
               { value: 290, name: '孤寡老人' },
               { value: 270, name: '贫困学生' },
               { value: 470, name: '烈士子女' },
               { value: 360, name: '其他' },
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  // color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  // color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                      color: "rgba(16, 143, 249,0.7)",

                // color: '#c23531',
                // shadowBlur: 200,
                // shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },

    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() {
    
    this.dgwdwqd()
   },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getSCE()
    this.getSUM()
    this.getClick()
    this.getpay()
    this.getpayNum()
    this.getpayNum1()
    this.getpayNum23()

    this.dgwdwqd()


  },
  // 里面的函数只有调用才会执行
  methods: {
    // 交易总笔数
    getSCE() {
      this.chart = Chart.init(this.$refs.SCEchart)
      this.chart.setOption(this.SCEoption)
    },
    // 交易总金额
    getSUM() {
      this.chart = Chart.init(this.$refs.SUMEchart)
      this.chart.setOption(this.SUMoption)
    },
    // 总点击量
    getClick() {
      this.chart = Chart.init(this.$refs.ClickEchart)
      this.chart.setOption(this.Clickoption)
    },
    // 支付方式统计
    getpay() {
      this.chart = Chart.init(this.$refs.payEchart)
      this.chart.setOption(this.payoption)
    },
    // 支付方式统计
    getpayNum() {
      this.chart = Chart.init(this.$refs.payNumEchart)
      this.chart.setOption(this.payNumoption)
    },
 getpayNum1() {
      this.chart = Chart.init(this.$refs.payoption1)
      this.chart.setOption(this.payoption1)
    }
    ,
 getpayNum23() {
      this.chart = Chart.init(this.$refs.payNumEchart2)
      this.chart.setOption(this.payNumEchart2)
    },
    dgwdwqd(){
      this.chart = Chart.init(this.$refs.shuju)
      this.chart.setOption(this.shuju)
    }


  }
};
</script>
<style>
.paybox1{
   height: 250px;
   width: 344px;
}
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* background-image: url("../img/llq.png"); */
                      /* background-color: "rgba(16, 143, 249,0.7)", */

   /* background-color: rgb(240, 235, 235); */


}
.stbgc {
  background-color: #fff;
  height: 40px;
  line-height: 60px;
  border-radius: 5px;
  font-size: 25px;
  align-content: center;
  text-align: center;
  margin-left: 33%;
  align-items: center;
  /* padding: 0px 16px; */
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  border:1px solid rgb(0, 166, 255);
  background-color: #fff;
  margin-top: 15px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  border:1px solid rgb(0, 166, 255);

  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 4px;
  height: 32vh;
  padding:0 0 0 10px;
}
</style>